<template>
	<view>
		<uni-list class="hot-list">
			<uni-list-item v-for="(item, index) in deviceList" :key="index"
				:title="item.F_ModelName"
				@click="toDeviceDetail(index)">
        <view class="number-content">
          <view class="number-title">编号</view>
          <view class="number-detail">{{item.F_MachineCode}}</view>
        </view>
			</uni-list-item>
		</uni-list>
    <view class="all-complete">{{totalPage ? '已加载全部' : '没有符合条件的记录'}}</view>
    <message ref="message"></message>
	</view>
</template>

<script>
	import uniSearchBar from '@/components/uni/uni-search-bar.vue'
	import uniList from '@/components/uni/uni-list.vue'
	import uniListItem from '@/components/uni/uni-list-item.vue'
	import divider from "../../components/divider";
	import topTabbar from "../../components/topTabbar";

	import {list} from "../../api/device/list";
  import store from "@/store/index.js"

  export default {
		data() {
			return {
				deviceList: [],
        query: {
          // 分页条件
          pagination: {
            rows: 20,
            page: 1
          },
          // 查询条件
					queryJson: {
            F_EnCode: '', // 设备编号
          }
        },
        // 是否是上拉加载更多，如果是，那么要把数据push到deviceList中；如果不是那么要把数据替换deviceList
        ifLoadMore: false,
        // 总页数
        totalPage: 0
			}
		},
		methods: {
      /**
       * 获取设备数据
       */
      getList(callback) {
				list(this.query).then(res => {
          if (res.data.code === 200) {
            let list = res.data.data.rows;
            if (this.ifLoadMore) {
              this.deviceList.push(...list);
            } else {
              this.deviceList = list;
            }
            this.totalPage = res.data.data.total;
            callback && callback()
          }
        })
      },
      /**
       * 修改page参数
       * 这里只是单纯修改，请配合getList方法一起使用
       * @param page 修改为第几页
       */
      changePage(page) {
        this.query.pagination.page = page;
      },
      /**
       * 重新设置查询条件
       * 对于本页面来说，初始化搜索条件意味着还原成search页面带来的搜索条件
       */
      resetQuery() {
        this.changePage(1);
      },
      /**
       * 下拉刷新时处理query，除了page设置为1外，其他都不变
       */
      refreshQuery() {
        this.changePage(1);
      },
      /**
       * 自增page
       */
      incrementPageForQuery() {
        let current = this.query.pagination.page;
        this.changePage(current + 1);
      },
      /**
       * 跳转到设备的详情页
       * @param index 设备在数组中的索引
       */
			toDeviceDetail(index) {
        uni.showLoading({
          title: '加载中，请稍后',
          mask: true
        })
        let device = this.deviceList[index];
				uni.navigateTo({
					url: '/pages/device/detail?device=' + encodeURIComponent(JSON.stringify(device))
				})
        uni.hideLoading();
			}
		},
		components: {
			uniList, uniListItem, uniSearchBar, divider, topTabbar
		},
    /**
     * 开始下拉刷新
     */
    onPullDownRefresh () {
      // 将page更新为1
      this.refreshQuery();
      // 获取数据
      this.getList();
      // 停止下拉刷新
      uni.stopPullDownRefresh();
    },
    /**
     * 触发上拉加载更多
     */
    onReachBottom () {
      // 判断是不是已经到底部了，到底部就不去加载了
      if (this.query.pagination.page === this.total) {
        return;
      }
      // 设置为上拉加载更多
      this.ifLoadMore = true;
      // 使page自增1
      this.incrementPageForQuery();
      // 获取数据
      this.getList(() => {
        // 做完后恢复ifLoadMore为false
        this.ifLoadMore = false;
      });
    },
    /**
     * 在onReady里获取符合条件的设备记录
     */
    onReady() {
      this.getList();
      this.$refs.message.setMessageToStore(this.$refs.message)
    },
    /**
     * 在onLoad里给搜索条件赋值
     * @param options 从search里传递过来的参数
     */
    onLoad(options) {
      if (JSON.stringify(options) !== "{}") {
        let query = JSON.parse(decodeURIComponent(options.query));
        if (query) {
          this.query.queryJson = query;
        }
      }
    },
    /**
     * 点击右上角首页按钮，跳转到首页
     */
    onNavigationBarButtonTap() {
      store.commit('returnToHome')
    }
	}
</script>

<style scoped lang="scss">
	@import "~@/static/css/device/list.scss";
</style>

<style>
	page {
		background-color: #f5f5f5;
	}
</style>
